<template>
  <div :style="{ backgroundColor: detail.movie?.backgroundColor }">
    <div class="topboxs" :style="{ backgroundColor: detail.movie?.backgroundColor }">
      <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" :style="{ backgroundColor: detail.movie?.backgroundColor }"/>
    </div>
    <div class="most" style="margin-top: 46rem;">
      <div class="container">
        <div class="mcards">
          <div class="mcarleft">
            <van-image width="100" height="138" :src="detail?.movie?.img">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </div>
          <div class="mcarright">
            <p class="nm">{{ detail?.movie?.nm }}</p>
            <p class="enm">{{ detail?.movie?.enm }}</p>
            <p class="cat">{{ detail?.movie?.cat }}</p>
            <p class="star" v-if="detail?.movie?.star">
              {{ detail?.movie?.star?.replace(",", " / ").replace(",", " / ") }}
            </p>
            <p class="star" v-if="!detail?.movie?.star"></p>
            <p class="time">
              <span>{{ detail?.movie?.pubDesc }}</span
              >/<span>{{ detail?.movie?.episodeDur }}</span>
            </p>
            <div class="want">
              <div class="wleft">
                <p>
                  <van-icon name="like" color="#fefefe" />
                </p>
                <p>想看</p>
              </div>
              <div class="wright" v-if="detail?.reputation?.firstWord == ''">
                <p><van-icon name="star" color="#fefefe" /></p>
                <p>看过</p>
              </div>
            </div>
          </div>
        </div>

        <div class="ping" v-if="detail?.reputation?.content">
          <div class="ptou">
            <p>
              <span>
                <img
                  src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/logo-new.png"
                  alt=""
                /> </span
              >{{ detail?.movie?.scoreLabel }}
            </p>
            <p>{{ detail?.movie?.wish }}人想看</p>
            <p>{{ detail?.movie?.watched }}人看过</p>
          </div>
          <div class="pjiao">
            <div class="zuo">
              <p class="sc">{{ detail?.movie?.sc }}</p>
              <p class="snum">{{ detail?.realtime?.snum }}人评</p>
            </div>

            <div class="you">
              <div class="yleft">
                <p>TOP</p>
                <p class="sc">
                  {{ detail?.reputation?.content.slice(18, 19) }}
                </p>
              </div>
              <div class="yright">
                <p>{{ detail?.reputation?.firstWord }}</p>
                <p>{{ detail?.reputation?.content.slice(7, 14) }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="xiang" v-if="!detail?.reputation?.content">
          <div class="shang">
            <span style="font-size: 12rem">
              <img
                style="width: 16rem; height: 16rem"
                src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/logo-new.png"
                alt=""
              />猫眼电影
            </span>
          </div>
          <div class="xia">
            <p>
              <b>{{ detail?.movie?.wish }}</b> 人想看
            </p>
          </div>
          <div class="di" v-if="detail?.movie?.scm">
            <div class="ditu">
              <img
                style="width: 14rem; height: 14rem"
                src="https://p1.meituan.net/scarlett/b2e6e57287731fb2b768ace2dc889b321236.png@80q"
                alt=""
              />
            </div>
            <p>{{ detail?.movie?.scm }}</p>
          </div>
          <div class="di" v-if="detail?.movie?.scm == ' '"></div>
        </div>
        <div class="jianjie">
          <div class="jia">
            <h1>简介</h1>
            <p>
              <span>展开<van-icon name="arrow-down" /></span>
            </p>
          </div>
          <p>{{ detail?.movie?.shareInfo?.content.slice(3, end) }}</p>
        </div>
        <div class="yanyuan">
          <h1>演职人员</h1>
          <ul>
            <li v-for="item in yanzhi" :key="item.id">
              <van-image width="100" height="138" :src="item?.avatar" />
              <p>{{ item?.cnm }}</p>
              <p>{{ item?.desc }}</p>
            </li>
          </ul>
        </div>
        <div class="sptj" v-if="!feedVideos">
          <h1>视频推荐</h1>
          <ul>
            <li
              class="imgbox"
              v-for="(vid, index) in detail?.feedVideos?.feeds"
              :key="index"
              @click="dianyixia(vid),$router.push({ path: '/playvideo',query:{id:vid.id,video:vid?.video?.url,itemmovname:vid?.title} })"
            >
              <van-image width="140" height="93" :src="vid?.video?.imgUrl||video?.imgUrl" />
              <div class="ic">
                <van-icon name="play-circle-o" size="32rem" color="#f4f4f4" />
              </div>
            </li>
          </ul>
        </div>
        <div class="sptj" v-if="feedVideos"></div>
        <div class="juzhao" v-if="detail?.movie?.photos">
          <h1>剧照</h1>
          <ul>
            <li v-for="(lii, index) in detail?.movie?.photos" :key="index">
              <van-image width="140rem" height="93rem" fit="cover" :src="lii" />
            </li>
          </ul>
        </div>
        <div class="juzhao" v-if="!detail?.movie?.photos"></div>
        <div class="brief">
          <h1>短评</h1>
          <div
            class="user"
            v-for="(use, index) in detail?.comments?.hotComments"
            :key="index"
          >
            <div class="userleft">
              <div class="img">
                <img :src="use?.avatarUrl" />
              </div>
            </div>
            <div class="userright">
              <div class="name">
                <div class="naleft">
                  <div class="nameuse">
                    <span>{{ use.nick }}</span>
                    <span v-if="use?.userLevel == 3"
                      ><img
                        style="width: 36rem; height: 16rem; margin-left: 5rem"
                        src="https://obj.pipi.cn/festatic/common/image/c853ef8e3cb69ad7bced9c38c39af045.png"
                        alt=""
                    /></span>
                    <span v-if="use?.userLevel == 2"
                      ><img
                        style="width: 36rem; height: 16rem; margin-left: 5rem"
                        src="https://obj.pipi.cn/festatic/common/image/e3137a2114dfa0f5da5f0d6f5743c8cf.png"
                        alt=""
                    /></span>
                    <span v-if="use?.userLevel == 4"
                      ><img
                        style="width: 36rem; height: 16rem; margin-left: 5rem"
                        src="https://obj.pipi.cn/festatic/common/image/d01ce8fba731fb827e1d412efb94f025.png"
                        alt=""
                    /></span>
                    <span v-if="use?.userLevel == 1"
                      ><img
                        style="width: 36rem; height: 16rem; margin-left: 5rem"
                        src="https://obj.pipi.cn/festatic/common/image/57da8b3f82af5d61cedb29cf54b0d2ce.png"
                        alt=""
                    /></span>
                  </div>
                  <p>
                    <span v-if="use?.score == '10'">
                      <van-rate
                        v-model="value1"
                        allow-half
                        size="9"
                        color="#faaf00"
                      />
                    </span>
                    <span v-if="use?.score == '9'">
                      <van-rate
                        v-model="value2"
                        allow-half
                        size="9"
                        color="#faaf00"
                      />
                    </span>
                    <span v-if="use?.score == '8'">
                      <van-rate
                        v-model="value3"
                        allow-half
                        size="9"
                        color="#faaf00"
                      />
                    </span>
                    <span v-if="use?.score == '7'">
                      <van-rate
                        v-model="value4"
                        allow-half
                        size="9"
                        color="#faaf00"
                      />
                    </span>
                    <span v-if="use?.score == '6'">
                      <van-rate
                        v-model="value5"
                        allow-half
                        size="9"
                        color="#faaf00"
                      />
                    </span>
                    <span v-if="use?.score == '5'">
                      <van-rate
                        v-model="value6"
                        allow-half
                        size="9"
                        color="#faaf00"
                      />
                    </span>
                    <span v-if="use?.score == '4'">
                      <van-rate
                        v-model="value7"
                        allow-half
                        size="9"
                        color="#faaf00"
                      />
                    </span>
                    <span v-if="use?.score == '3'">
                      <van-rate
                        v-model="value8"
                        allow-half
                        size="9"
                        color="#faaf00"
                      />
                    </span>
                    <span v-if="use?.score == '2'">
                      <van-rate
                        v-model="value9"
                        allow-half
                        size="9"
                        color="#faaf00"
                      />
                    </span>
                    <span>&nbsp;&nbsp;{{ use?.score }}分 </span>
                  </p>
                </div>
                <div class="naright">
                  <span><van-icon name="good-job-o" /></span>
                  <span>{{ use?.upCount }}</span>
                </div>
              </div>
              <div class="conter" v-html="use?.content"></div>
              <div class="time"></div>
            </div>
          </div>
        </div>
        <div class="tao" v-if="detail?.questions?.questions"></div>
        <div class="tao" v-if="!detail.questions?.questions">
          <h1>讨论</h1>
          <div
            class="tlun"
            v-for="(disc, index) in detail?.questions?.questions"
            :key="index"
          >
            <p class="title">{{ disc?.question?.content }}</p>
            <p class="hui" v-if="disc?.question?.answerCnt !== 0">
              {{ disc?.question?.answerCnt }}个讨论
            </p>
            <p class="hui" v-if="disc?.question?.answerCnt == 0">暂无讨论</p>
          </div>
        </div>
        <div class="piaofang" v-if="mbox">
          <h1>票房</h1>
          <div class="zuori">
            <div class="paiming" v-if="detail?.mbox?.mbox?.lastDayRank > 0">
              <p class="yangshi">{{ detail.mbox?.mbox?.lastDayRank }}</p>
              <p>昨日排名</p>
            </div>
            <div
              class="paiming"
              v-if="!detail?.mbox?.mbox?.lastDayRank > 0"
            ></div>
            <div class="paiming" v-if="detail?.mbox?.mbox?.firstWeekBox > 0">
              <p class="yangshi">{{ detail?.mbox?.mbox?.firstWeekBox }}</p>
              <p>首周票房（万）</p>
            </div>
            <div
              class="paiming"
              v-if="!detail?.mbox?.mbox?.firstWeekBox > 0"
            ></div>
            <div class="paiming" v-if="detail?.mbox?.mbox?.sumBox > 0">
              <p class="yangshi">{{ detail.mbox?.mbox?.sumBox }}</p>
              <p>累计票房（万）</p>
            </div>
            <div class="paiming" v-if="!detail?.mbox?.mbox?.sumBox > 0"></div>
          </div>
        </div>
        <div class="piaofang" v-if="!mbox"></div>
        <div class="kuanxun">
          <h1>相关快讯</h1>
          <div
            class="kxhz"
            v-for="(kx, index) in detail?.newsList?.newsList"
            :key="index"
          >
            <div class="top">
              <div class="tleft">
                {{ kx.title }}
              </div>
              <div class="tright">
                <van-image
                  width="110rem"
                  height="78rem"
                  fit="contain"
                  :src="kx?.previewImages[0].url"
                />
                <!-- <img :src="kx.previewImages[0].url" alt="" /> -->
              </div>
            </div>
            <div class="bottom">
              <div class="bleft">
                <p class="name">{{ kx?.source }}</p>
              </div>
              <div class="bright">
                <p class="num">
                  <span>
                    <van-icon name="eye-o" />
                  </span>
                  <span>{{ kx?.viewCount }}</span>
                </p>
                <p class="pi">
                  <span>
                    <van-icon name="comment-o" />
                  </span>
                  <span>{{ kx?.commentCount }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="aboutmov">
          <h1>相关影片</h1>
          <div class="cardbox">
            <div class="cardlittle">
              <CardView
                v-for="(banners, index) in detail?.relatedMovies"
                :key="banners.id"
                :banners="banners"
                @click="
                  $router.push({
                    path: '/caseinfoeditor',
                    query: { id: banners.id },
                  })
                "
              ></CardView>
            </div>
          </div>
        </div>
        <div class="biao">
          <p>影视行业信息</p>
          <p>
            <a
              href="https://m.maoyan.com/terms/private?id=privacy_1629962927685"
              >《免责声明》</a
            >
          </p>
          <p>违法和不良信息举报电话：400601890</p>
        </div>
        <div class="bigbottom">
          <div class="imbox">
            <van-image
              width="78rem"
              height="22rem"
              fit="contain"
              src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/bottom-logo.png"
            />
          </div>
        </div>
        <div class="goupiao">
          <div class="gouleft">
            <img
              src="https://obj.pipi.cn/festatic/asgard/resources/images/movie/share-icon.png"
              alt=""
            />
          </div>
          <div class="gouright">
            <div
              class="p"
              @click="
                $router.push({
                  path: '/purchase',
                  query: { id: detail?.movie?.id },
                })
              "
            >
              <p>特惠购票</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CardView from "@/components/CardView.vue";
import { useRoute } from "vue-router";
import axios from "@/api/axios.js";
import { ref } from "vue";
const onClickLeft = () => history.back();
const value1 = ref(5);
const value2 = ref(4.5);
const value3 = ref(4);
const value4 = ref(3.5);
const value5 = ref(3);
const value6 = ref(2.5);
const value7 = ref(2);
const value8 = ref(1.5);
const value9 = ref(1);
const route = useRoute();
var reg = /\B(?<!(\.\d+))(?=(\d{3})+\b)/g;
var moviesid = ref(`${route.query.id}`);
const dianyixia=(vid)=>{
  // console.log(vid?.video?.url||video?.url);
}
const getDetail = () =>
  axios.get(
    "https://apis.netstart.cn/maoyan/movie/detail?movieId=" + moviesid.value
  );
const detail = ref([]);
const yanzhi = ref([]);
const jz = ref([]);
const vide = ref([]);

async function update() {
  const { data } = await getDetail();
  detail.value = data;
  jz.value = data?.movie?.photos;
  yanzhi.value = data?.celebrities;
  // vide.value = data.feedVideos.feeds;
  // console.log("dianyingdetail", detail);
  // return detail;
}
update();
</script>

<style lang="scss" scoped>
:deep(.van-nav-bar__text){
  color: #fff;
}
:deep(.van-nav-bar__arrow){
  color: #fff;
}
.topboxs {
  box-sizing: border-box;
}
.mcards {
  padding: 10rem 16rem;
  display: flex;
  .mcarright {
    padding-left: 10rem;
    .nm {
      font-size: 17rem;
      color: #fff;
      line-height: 38rem;
      margin: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .enm {
      font-size: 12rem;
      color: #fff;
      line-height: 18rem;
      opacity: 0.6;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .cat {
      font-size: 12rem;
      color: #fff;
      line-height: 18rem;
      opacity: 0.6;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .star {
      font-size: 12rem;
      color: #fff;
      line-height: 18rem;
      opacity: 0.6;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .time {
      font-size: 12rem;
      color: #fff;
      padding: 5rem 0 5rem;
      line-height: 14rem;
      opacity: 0.6;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .want {
      display: flex;
      justify-content: space-between;
      width: 232rem;
      .wleft {
        width: 100rem;
        height: 30rem;
        border-radius: 5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: hsla(0, 0%, 100%, 0.35);
        box-shadow: 0 32rem 12rem 0 rgb(0 0 0 / 10%);
        color: #fff;
      }
      .wright {
        width: 110rem;
        height: 30rem;
        border-radius: 5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: hsla(0, 0%, 100%, 0.35);
        box-shadow: 0 32rem 12rem 0 rgb(0 0 0 / 10%);
        color: #fff;
      }
    }
  }
}
.xiang {
  // height: 100rem;
  width: 343rem;
  background-color: rgba(0, 0, 0, 0.18);
  border-radius: 16rem;
  margin: 5rem auto;
  padding: 10rem 10rem 15rem 0;
  font-size: 20rem;
  box-sizing: border-box;
  .shang {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10rem 10rem 0 10rem;
    color: #999;
  }
  .xia {
    width: 200rem;
    margin: 0 auto;
    font-size: 18rem;
    color: #f4f4f4;
    text-align: center;
    b {
      font-size: 26rem;
      color: #faaf00;
    }
  }
  .di {
    display: flex;
    margin-top: 14rem;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 12rem;
    padding: 0 10rem 0 10rem;
    margin-left: 20rem;
    font-size: 12rem;
    line-height: 28rem;
    color: #a3c5d3;
    .ditu {
      margin: 2rem 5rem 0 0;
    }
  }
}
.ping {
  width: 343rem;
  background-color: rgba(0, 0, 0, 0.18);
  border-radius: 16rem;
  margin: 5rem auto;
  padding: 10rem 10rem 10rem 0;
  box-sizing: border-box;
  .ptou {
    display: flex;
    color: #967e77;
    justify-content: space-evenly;
    line-height: 22rem;
    img {
      width: 16rem;
      height: 16rem;
      display: inline;
    }
  }
  .pjiao {
    display: flex;
    justify-content: space-between;
    .zuo {
      font-size: 14rem;
      margin-left: 30rem;
      text-align: end;
      .sc {
        font-size: 24rem;
        font-weight: bold;
        color: #ffb400;
        margin-bottom: 4rem;
      }
      .snum {
        font-size: 12rem;
        color: #ffffff66;
      }
    }
    .you {
      width: 140rem;
      height: 50rem;
      display: flex;
      padding: 5rem;
      color: #fbefb8;
      border-radius: 7rem;
      border: 1rem solid #ffb400;
      .yleft {
        padding-top: 7rem;
        width: 30rem;
        margin-right: 5rem;
        text-align: center;
        color: #fadc83;
        border-radius: 6rem;
        background-color: #7b4d2d;
        .sc {
          padding-top: 1rem;
        }
      }
      .yright {
        width: 85rem;
        padding-top: 5rem;
      }
    }
  }
}
.jianjie {
  width: 370rem;
  padding: 5rem 16rem 0rem 16rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 15rem;
  color: #fff;
  text-align: center;
  .jia {
    display: flex;
    justify-content: space-between;
    padding: 5rem 0;
  }
}
.yanyuan > ul::-webkit-scrollbar {
  display: none;
}
.yanyuan {
  padding: 10rem 16rem 0;
  h1 {
    font-size: 15rem;
    color: #fff;
    padding: 10rem 0rem;
  }
  ul {
    display: flex;
    overflow: auto;
    text-align: center;
    li {
      margin-right: 10rem;
      :nth-last-child(0) {
        margin-right: 0;
      }
    }
  }
}
.sptj > ul::-webkit-scrollbar {
  display: none;
}

.sptj {
  padding: 10rem 16rem 0;
  h1 {
    font-size: 15rem;
    padding: 10rem 0;
    color: #fff;
  }
  ul {
    display: flex;
    overflow-y: auto;
    img {
      display: block;
      // object-fit: none;
    }
    li {
      margin-right: 10rem;
      position: relative;
      .ic {
        position: absolute;
        top: 35%;
        left: 40%;
      }
    }
  }
}
.juzhao > ul::-webkit-scrollbar {
  display: none;
}

.juzhao {
  padding: 10rem 16rem 0;
  h1 {
    font-size: 15rem;
    padding: 10rem 0;
    color: #fff;
  }
  ul {
    display: flex;
    overflow: auto;
    img {
      display: block;
      object-fit: none;
    }
    li {
      margin-right: 10rem;
    }
  }
}
.brief {
  width: 100vw;
  margin: 0 auto;
  border-bottom: 10rem solid #f4f4f4;
  padding-bottom: 10rem;
  border-radius: 12rem 12rem 0 0;
  background-color: #fff;
  box-sizing: border-box;
  h1 {
    padding-top: 5rem;
    margin: 10rem 10rem;
    font-size: 14rem;
  }
  .user {
    margin-top: 15rem;
    display: flex;
    .userleft {
      width: 45rem;
      padding-left: 10rem;
      .nameuse {
        display: flex;
        justify-content: center;
        p {
          font-size: 12rem;
          .van-rate__item {
            font-size: 16px;
          }
        }
      }
      .img {
        width: 34rem;
        height: 34rem;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
    .userright {
      width: 290rem;
      margin-left: 10rem;
      .name {
        display: flex;
        justify-content: space-between;
        .naleft {
          p {
            font-size: 12rem;
            color: #faaf00;
            i {
              font-size: 16rem;
            }
          }
        }
        .naright {
          display: flex;
          align-items: center;
        }
      }
      .conter {
        font-size: 15rem;
        color: #333;
        overflow: hidden;
        -webkit-line-clamp: 7;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }
  }
}
.tao {
  background-color: #fff;
  padding: 0 16rem 0;
  h1 {
    font-size: 15rem;
    padding: 10rem 0;
  }
  .tlun {
    border-bottom: 1rem solid #eeeeee90;
    .title {
      padding-top: 10rem;
      font-size: 17rem;
      color: #333;
    }
    .hui {
      font-size: 12rem;
      color: #666;
      padding: 5rem 0 10rem;
    }
  }
}
.piaofang {
  background-color: #fff;
  // padding-bottom: 15rem;
  border-bottom: 10rem solid #f4f4f4;
  h1 {
    font-size: 15rem;
    color: #333;
    padding: 10rem 0 10rem 15rem;
  }
  .zuori {
    width: 345rem;
    height: 65rem;
    // line-height: 65rem;
    text-align: center;
    margin: 0 auto;
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .yangshi {
      font-size: 17rem;
      color: #f03d37;
    }
    p {
      color: #666;
    }
  }
}
.aboutmov {
  background-color: #fff;
  h1 {
    font-size: 15rem;
    padding: 10rem 0 10rem 15rem;
  }
  .cardbox::-webkit-scrollbar {
    display: none;
  }
  .cardbox {
    width: 95vw;
    height: 160px;
    display: flex;
    margin: 10rem auto 0;
    background-color: #fff;
    text-align: center;
    overflow: auto;
    .cardlittle {
      display: flex;
    }
  }
}
.kuanxun {
  background-color: #fff;
  border-bottom: 10rem solid #f4f4f4;
  h1 {
    font-size: 15rem;
    color: #333;
    padding: 10rem 15rem;
  }
  .kxhz {
    padding: 15rem;
    .top {
      display: flex;
      justify-content: space-between;
      .tleft {
        width: 215rem;
        font-size: 17rem;
        color: #333;
      }
    }
    .bottom {
      background-color: #fff;
      font-size: 12rem;
      color: #999;
      padding-bottom: 5rem;
      display: flex;
      justify-content: space-between;
      border-bottom: 1rem solid #f4f4f4;
      .bleft {
        display: flex;
      }
      .bright {
        display: flex;
        p {
          margin-left: 5rem;
        }
        .num {
          margin-right: 35rem;
        }
      }
    }
  }
}
.biao {
  background-color: #f4f4f4;
  padding-top: 40rem;
  display: flex;
  justify-content: center;
}
.bigbottom {
  background-color: #f4f4f4;
  padding-bottom: 60rem;
  .imbox {
    width: 78rem;
    margin: 0 auto;
    padding: 10rem 0;
  }
}
.goupiao {
  background-color: #fff;
  width: 100vw;
  height: 60rem;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  .gouleft {
    width: 19rem;
    height: 19rem;
    margin: 20rem 30rem 24rem 24rem;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .gouright {
    .p {
      border: 1rem solid red;
      border-radius: 24rem;
      font-size: 17rem;
      color: #fff;
      background-image: linear-gradient(-90deg, #fb3333, #ff5269);
      box-shadow: 0 1rem 2rem 0 rgb(251 51 51 / 30%);
      width: 282rem;
      height: 44rem;
      margin: 8rem 10rem;
      text-align: center;
      line-height: 44rem;
    }
  }
}
</style>
